<template>
  <div class="mobile-login-wrapper">
    <h1>移动端登录页面</h1>

    <!-- <div>{{updateData}}</div> -->
    <!-- v-update -->
    <child  :infoObj="updateData" @colectData="getData"></child>
    <div>
      <span>父文件：</span>
      {{getVal}}
    </div>
    <el-input v-model="getVal" placeholder=""></el-input>
    <el-button type="primary" @click="toUpdate">更新</el-button>
    <router-link to="/home">HOME</router-link>

  </div>
</template>

<script>
import Child from './child.vue';
  export default {
    name: 'MobileLogin',

    components: {
      'child': () => import('./child')
    },
    
    directives: {

      update: {
        inserted(el, binding, vnode) {
          console.log('el', el)
          const myEl = el;
          const parentEl = el.parentNode;
          console.log('parentEl', parentEl)
          parentEl.removeChild(myEl)
          setTimeout(() => {
            parentEl.appendChild(myEl)
          },10)
          console.log('binding', binding)
          console.log('vnode', vnode)
        } 
      }
    },

    data() {
      return {
        updateData: {
          name: '张三',
          age: 18
        },
        list:[
          {
            name: '111',
            age: 12
          },
          {
            name: '222',
            age: 13
          },
        ],
        getVal: '待更新的父文件数据',
      }
    },

    mounted() {

    },

    methods: {
      toUpdate() {
        this.updateData.name = '李斯';
        this.list[0].name = '李斯'
        setInterval(() => {
          this.list[0].age++
        }, 1000);
      },

      getData(val) {
        console.log('val', val)
        this.getVal = val;
      }
    }
  }
</script>


<style lang="stylus" scoped>
  
</style>